<template>
  <div>
    <bread-crumb-view :breadList="breadList"></bread-crumb-view>

    <el-card shadow="always">
      <div ref="tuzi" class="echarts"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import BreadCrumbView from "../../components/BreadCrumbView.vue";
import demo from "@/api/login";
export default {
  components: { BreadCrumbView },
  name: "ToTuBiao",
  data() {
    return {
      breadList: ["数据统计", "数据报表"],
      tubiao: {
        data: [],
        series: [],
        xAxis: [],
      },
    };
  },
  methods: {
    into() {
      let option = {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: this.tubiao.data,
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.tubiao.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.tubiao.series,
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs["tuzi"]);
      // 绘制图表
      myChart.setOption(option);
    },
  },
  async created() {
    let res = await demo.setTings();
    console.log(res);
    this.tubiao.data = res.legend.data;
    this.tubiao.series = res.series;
    this.tubiao.xAxis = res.xAxis.data;
    this.into();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
:deep(.el-card) {
  margin: 20px auto;
  .echarts {
    width: 100%;
    height: 500px;
  }
}
</style>